/**
* @description: 已办工单==> 工单完成详情
* @author: 姚超
* @date:
**/
<template>
  <view class="main">
    <nav-bar class="header" back :title="title" @goBack="goBack" />
    <view class="task-main">
      <view class="task-top">
        <text class="equip-title">工单名称：{{taskName}}</text>
      </view>
      <view class="task-content">
        <template v-for="(item, index) in options" >
          <view class="content-item" v-if="item.type == 'text'" :key="index">
            <view class="item-lf">
              {{item.name}}:
            </view>
            <view class="item-right">
              {{item.value}}
            </view>
          </view>
          <view class="content-item2" v-else :key="index">
            <view class="item-lf">
              {{item.name}}:
            </view>
            <view class="item-img">
              <!-- <img src="../../static/img/light.png" alt=""> -->
              <div class="image-wrap">
                <img v-for="(imgItem, index) in item.value" :key="index" :src="imgItem.url" alt="">
              </div>
            </view>
          </view>
        </template>

      </view>
    </view>
  </view>
</template>
<script>
import navBar from '../../components/common/nav-bar'
import baseConfig from '../../common/config'
let config = {}
baseConfig.getOptions.then(res => {
  config = res
})
export default {
  name: 'taskCompletionDetails',
  components: { navBar },
  props: {},
  data() {
    return {
      title: '工单完成详情',
      objId: '',
      taskName: '1000KV北岳特高压变电站.通信电源更换',
      options: [
        {
          name: '检修类型',
          key: 'type',
          type: 'text',
          value: ''
        },
        {
          name: '检修类别',
          key: 'category',
          type: 'text',
          value: ''
        },
        {
          name: '检修工作地点',
          key: 'address',
          type: 'text',
          value: ''
        },
        {
          name: '检修工作原因',
          key: 'reason',
          type: 'text',
          value: ''
        },
        {
          name: '检修工作内容',
          key: 'content',
          type: 'text',
          value: ''
        },
        {
          name: '影响范围',
          key: 'scope',
          type: 'text',
          value: ''
        },
        {
          name: '现场照片',
          key: 'photos',
          type: 'img',
          value: []
        },
        {
          name: '备注',
          key: 'remark',
          type: 'text',
          value: ''
        },
        {
          name: '执行人',
          key: 'executerName',
          type: 'text',
          value: ''
        },
        {
          name: '执行时间',
          key: 'executerTim',
          type: 'text',
          value: ''
        }
      ]
    }
  },
  computed: {},
  watch: {},
  onLoad(e) {
    this.objId = e.OBJ_ID
  },
  mounted() {
    this.getDataDetail()
  },
  methods: {
    getDataDetail() {
      this.$api.getDetails({ objId: this.objId }).then(res => {
        if (res.code == 0) {
          let data = res.data
          this.taskName = data.name
          this.options.filter(item => {
            if (item.key == 'photos') {
              item.value = data.photos.map(item => {
                return { url: config.baseUrl + item }
              })
            } else {
              item.value = data[item.key]
            }
          })
        }
      })
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>
<style scoped lang="scss">
.main {
  width: 100vw;
  height: 100vh;
  background: #f2f6fa;
  overflow: hidden;

  .task-main {
    height: calc(100vh - #{px2vh(80)} - 38px);
    overflow-y: auto;
    position: relative;
    .task-top {
      background: #fff;
      padding-left: px2vw(20);
      height: px2vh(100);
      position: sticky;
      top: 0;
      .equip-title {
        color: #333;
        font-size: px2vw(48);
        width: px2vw(980);
        height: px2vh(100);
        line-height: px2vh(100);
        float: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: px2vw(10);
      }
    }
  }
}
.task-content {
  display: flex;
  flex-direction: column;
  margin: px2vh(20) 0 px2vh(100);
  padding: 0 px2vw(40);
  background: #fff;
  font-size: px2vh(36);
}
.content-item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: px2vh(80);
  margin-top: px2vh(30);
  .item-lf {
    width: px2vw(400);
  }
  .item-right {
    flex: 1;
  }
}
.content-item2 {
  .item-img {
    margin: px2vh(40) 0;
    .image-wrap {
      width: 100%;
      display: flex;
      img {
        width: px2vw(215);
        height: px2vw(215);
        margin-right: px2vw(40);
        border-radius: px2vw(6);
      }
    }
  }
}
</style>